<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>
        window.onload = function () {
            findGrade();
        }

        function findGrade() {
            axios.get("/grade/findAll",null).then(e => {
                var info = e.data;
                var str = "";
                for (var i = 0;i < info.length;i++){
                    str += `<input type='checkbox' name="gradeArray" value="${info[i].id}">${info[i].name}`;
                }
                $("gradeDiv").innerHTML = str;
            });
        }

        function getItem() {
            var idArray =  [];
            //得到所有选中框的复选框
            var boxList = document.querySelectorAll(
                "#gradeDiv [name='gradeArray']:checked");
            for (var i = 0;i < boxList.length;i++){
                idArray.push(boxList[i].value);
            }
            return idArray;
        }

        function addRole() {
            var params = new URLSearchParams();
            params.append("name",$("name").value);
            params.append("gradeArray",getItem());
            alert(getItem())
            axios.post("/role/add",params).then(e => {
                if (e.data == "ok"){
                    location.href = "/role/role.html"
                }
            })
        }
    </script>
</head>
<body>
    <h2>添加角色</h2>
    角色名称：<input type="text" id="name">
    拥有权限：<div id="gradeDiv" style="width: 300px"></div>
    <input type="button" value="添加角色" onclick="addRole()">
</body>
</html>